
<template>
    <textarea ref="refCodeEdit" class="code-edit"></textarea>
</template>
 <script lang="ts">
import { ref, defineComponent, onMounted, onUnmounted, watchEffect } from 'vue';
// 主包
import CodeMirror from 'codemirror'
import "codemirror/lib/codemirror.css";
// 支持主题
import "codemirror/theme/monokai.css";
// 代码高亮
import "codemirror/mode/javascript/javascript.js";
//折叠代码
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/foldcode.js";
//大括号折叠
import "codemirror/addon/fold/brace-fold.js";
//注释折叠
import "codemirror/addon/fold/comment-fold.js";
//代码智能提示
import 'codemirror/addon/hint/show-hint'
import 'codemirror/addon/hint/javascript-hint'
import 'codemirror/addon/hint/html-hint'
import 'codemirror/addon/hint/css-hint'
//括号匹配
import "codemirror/addon/edit/matchbrackets.js";
// 滚动条
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'
import 'codemirror/addon/selection/active-line'
let editor: any = null;
const defaultOption = {
    mode: "text/javascript",    //实现javascript代码高亮
    lineNumbers: true,	//显示行号
    theme: "monokai",	//设置主题
    foldGutter: true,//代码折叠
    matchBrackets: true,	//括号匹配
    extraKeys: {
        "Ctrl": "autocomplete",//输入s然后ctrl就可以弹出选择项  
    },
    styleActiveLine: true,
    tabSize: 10,
    // readOnly:"nocursor",
    smartIndent: true,
    scrollbarStyle: "overlay"
    // keymap:"defaule"
};
export default defineComponent({
    name: 'cpcCodeEdit',
    components: {
    },
    props: {
        content: {
            type: String,
            default: ''
        },
        option: {
            type: Object,
            default() {
                return {}
            }
        }
    },
    emits: ["change"],
    setup: (props: any, { attrs, slots, emit }) => {
        const refCodeEdit = ref(null);
        onMounted(() => {
            editor = CodeMirror.fromTextArea(refCodeEdit.value, Object.assign(defaultOption, props.option));
            watchEffect(() => {
                editor.setValue(props.content);
            })
        });
        onUnmounted(() => {
            const element = editor.doc.cm.getWrapperElement()
            element && element.remove && element.remove()
        })

        function getValue() {
            return editor.getValue();
        }
        return { refCodeEdit, getValue }
    }
})
</script>
<style>
.code-edit,
.CodeMirror {
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-size: 0.16rem;
    line-height: 150%;
}

.CodeMirror-scroll {
    height: 100%;
}
</style>